<template>
	<view v-if="show" class="driver" @touchmove.stop="() => {}">
		<view class="active-element" :style="[activeStyle]">
			<view class="popover" :style="[popoverStyle]">
				<view class="popover-content">
					<view class="popover-title">
						{{ title }}
					</view>
					<view class="popover-desc">
						{{ desc }}
					</view>
					<view class="footer">
						<text>{{ activeIdx + 1 }}/{{ steps.length }}</text>
						<view class="footer-btn">
							<button size="mini" type="default" v-if="activeIdx > 0" @click="prev" style="background: none;color:#FF5E01;border:1px solid #FF5E01">上一步</button>
							<button size="mini" type="default" v-if="activeIdx < steps.length - 1" @click="next" style="background: none;color:#FF5E01;border:1px solid #FF5E01">下一步</button>
							<button size="mini" type="default" v-else @click="skip" style="background: none;color:#aaa;border:1px solid #aaa">关闭</button>
						</view>
					</view>
				</view>
			</view>
			<view class="triangle" :style="[triangleStyle]"></view>
		</view>
		<view class="skip" style="position: fixed;bottom:10rpx;right:10rpx;">
			<view class="">
				<button size="mini" type="default" @click="skip" style="background: #fff;color:#FF5E01;border:1px solid #FF5E01">跳过</button>
			</view>
		</view>
	</view>
</template>

<script>
const Sys = uni.getSystemInfoSync();
import {addOperateGuide} from '@/config/api.js'
export default {
	name: 'driver-page',
	props: {
		
		// 边框厚度
		frameThickness: {
			type: Number,
			default: 5
		},
		// 三角大小
		triangleSize: {
			type: Number,
			default: 10
		}
	},
	computed: {
		activeStyle() {
			return {
				...this.activeEl
			};
		},
		popoverStyle() {
			return {
				...this.popoverEl
			};
		},
		triangleStyle() {
			return {
				borderWidth: this.triangleSize + 1 + 'px',
				...this.triangleEl
			};
		}
	},
	data() {
		return {
			show: false,
			activeEl: null,
			popoverEl: null,
			triangleEl: null,
			desc: '',
			title: '',
			activeIdx: -1,
			scrollTop:0,
			steps:[],
			name:''
		};
	},
	mounted() {
		// const driverPageShow = uni.getStorageSync('driverPageShow');
		// if (this.steps.length && driverPageShow != 1) {
		// 	this.show = true;
		// 	this.next();
		// }
	},
	
	methods: {
		showPop(steps,name){
			this.show = false
			this.activeEl = null
			this.popoverEl = null
			this.triangleEl = null
			this.desc = ''
			this.title = ''
			this.activeIdx = -1
			this.scrollTop = 0
			this.steps = []
			this.name = ''
			this.steps = steps;
			this.name = name
			if (this.steps.length) {
				this.show = true;
				this.next();
			}
		},
		setScroll(val){
			this.scrollTop = val
		},
		skip() {
			this.show = false;
			// uni.setStorageSync('driverPageShow', 1);
			this.pageScrollTo(0)
			let operateType = [];
			this.steps.forEach((el)=>{
				operateType.push(el.element)
			})
			addOperateGuide({operateType:operateType})
		},
		prev() {
			this.activeIdx--;
			this.getEl();
		},
		next() {
			this.activeIdx++;
			this.getEl();
		},
		pageScrollTo(scrollTop, duration = 0) {
			return new Promise((resolve) => {
				// 兼容微信小程序
				uni.pageScrollTo({
					scrollTop,
					success: (res) => {
						setTimeout(() => {
							resolve(res);
						}, duration);
					}
				});
			});
		},
		// 判断要显示的el是否在窗口内
		inViewport(query, element) {
			let isIn = true;
			return new Promise((resolve) => {
				query
					.select('#' + element)
					.boundingClientRect((data) => {
						console.log("data",data)
						if (data.top < 0 || data.bottom > Sys.screenHeight) {
							isIn = false;
						}
						resolve({
							isIn,
							scrollTop: data.top - 100
						});
					})
					.exec();
			});
		},
		async getEl() {
			const { element, popover } = this.steps[this.activeIdx];
			this.title = popover.title;
			this.desc = popover.description;
			const side = popover.side || 'button';
			let query = uni.createSelectorQuery().in(this.$parent)
			if(element == 'orderBuySignStatus' || element == 'orderSellSignStatus' ||  element == 'orderPayStatus' ||  element == 'orderSendStatus'){
				 query = uni.createSelectorQuery().in(this.$parent.$refs['tab']);
			}
			const { isIn, scrollTop } = await this.inViewport(query, element);
			// console.log("isIn",isIn)
			if (!isIn) {
				await this.pageScrollTo(scrollTop);
			}
			query
				.select('#' + element)
				.boundingClientRect((data) => {
					this.setActive(data);
					this.setTriangle(data, side);
					this.setPopover(data, side);
				})
				.exec();
		},
		// 设置引导语弹框位置
		setPopover(data, side) {
			switch (side) {
				case 'bottom':
					this.popoverEl = {
						top: data.height + this.frameThickness * 2 + this.triangleSize + 'px',
						left: -data.left + this.frameThickness + Sys.screenWidth / 10 + 'px'
					};
					break;
				default:
					this.popoverEl = {
						bottom: data.height + this.frameThickness * 2 + this.triangleSize + 'px',
						left: -data.left + this.frameThickness + Sys.screenWidth / 10 + 'px'
					};
					break;
			}
		},
		// 设置三角位置
		setTriangle(data, side) {
			switch (side) {
				case 'bottom':
					this.triangleEl = {
						left: data.width / 2 - this.triangleSize / 2 + 'px',
						top: data.height + this.frameThickness * 2 - this.triangleSize + 'px'
					};
					break;
				default:
					this.triangleEl = {
						left: data.width / 2 - this.triangleSize / 2 + 'px',
						top: -1 - this.frameThickness * 2 + 'px',
						transform: 'rotate(180deg)'
					};
					break;
			}
		},
		// 设置激活元素位置
		setActive(data) {
			this.activeEl = {
				left: data.left - this.frameThickness + 'px',
				top: data.top+this.scrollTop - this.frameThickness + 'px',
				width: data.width + this.frameThickness * 2 + 'px',
				height: data.height + this.frameThickness * 2 + 'px'
			};
		}
	}
};
</script>

<style scoped lang="scss">
.skip {
	display: flex;
	justify-content: flex-end;
	padding: 10px;
}
.triangle {
	border-style: solid;
	position: absolute;
	width: 0;
	height: 0;
	border-color: transparent transparent #fff transparent;
}
.driver {
	position:absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99999;
	height:100%;
	min-height: 100vh;
}
.active-element {
	transition: all 0.2s;
	position: absolute;
	border-radius: 10px;
	box-shadow: 0 0 0 3000px rgba(0, 0, 0, 0.5);
}
.popover {
	position: absolute;
	width: 80vw;
	border-radius: 10px;
	background-color: #ffffff;
	box-sizing: border-box;
}
.popover-content {
	padding: 20rpx 40rpx;
}
.popover-title {
	font-size: 36rpx;
	font-weight: bold;
}
.footer {
	margin-top: 24rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.footer-btn {
	display: flex;
	justify-content: space-between;
	align-items: center;
	button {
		& + button {
			margin-left: 10rpx;
		}
	}
}
</style>
